<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			单价：<input type="number" v-model="price"> <br>
			数量：<input type="number" v-model="count"> <br>
			总价：{{getTotal()}} 方法<br>
			总价：{{total}} 计算属性
			<hr>
			
			<input v-model="text" type="text">
			<hr>
			身高：<input type="number" v-model="height"> m<br>
			体重：<input type="number" v-model="weight"> kg<br>
			BMI: {{getBMI()}} <br>
			<!-- {{bmi}} -->
			<hr>
			
			<span v-if="getBMI() < 18.5">你的体脂偏低</span>
			<span v-else-if="getBMI() > 23.9">你的体脂偏高</span>
			<span v-else>你的体脂正常</span>

			正常范围：18.5~23.9 体重/身高的平方
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						price: 5,
						count: 1,
						text: 'hello vue',
						height: 0,
						weight: 0
					}
				},
				computed: { // 计算属性
					total() {
						return this.price * this.count;
					}
					// bmi(){  //缓存
					// 	return(this.weight / (this.height * this.height)).toFixed(2);
					// },
				},
				methods: {
					getTotal() {
						return this.price * this.count;
					},
					getBMI() {
						if (this.height > 0) {
							return (this.weight / (this.height * this.height)).toFixed(2);
						}
						return 0;
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
